{extend name="public/base" /}
{block name='content'}
{include file='public/content_header' /}
<!--数据列表页面-->
<section class="content">

    <!--顶部搜索筛选-->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header dataSearch">
                <form class="form-inline searchForm" id="searchForm" action="{:url('index')}" method="GET">

                    <div class="input-group input-group-sm searchGroup">
                        <input value="{$_keywords ? $_keywords : '' ;}"
                               name="_keywords" id="_keywords" class="form-control input-sm" placeholder="音频名称/音频描述">
                    </div>
                    
                    <div class="form-group smallSelect">
                        <select name="_order" id="_order" class="form-control input-sm index-order">
                            <option value="">排序字段</option>
                            <option value="id" {if isset($_order) && $_order=='id'}selected{/if}>ID</option><option value="create_time" {if isset($_order) && $_order=='create_time'}selected{/if}>创建时间</option>
                        </select>
                    </div>

                    <div class="form-group smallSelect">
                        <select name="_by" id="_by" class="form-control input-sm index-order">
                            <option value="">排序方式</option>
                            <option value="desc" {if isset($_by) && $_by=='desc'}selected{/if}>倒序</option>
                            <option value="asc" {if isset($_by) && $_by=='asc'}selected{/if}>正序</option>
                        </select>
                    </div>
                    <script>
                        $('#_order').select2();
                        $('#_by').select2();
                    </script>

                    <div class="form-group searchGroup">
                        <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-search"></i> 查询
                        </button>
                    </div>
                    
                    <div class="form-group searchGroup">
                        <button onclick="clearSearchForm()" class="btn btn-sm btn-default" type="button"><i
                                class="fa  fa-eraser"></i> 清空查询
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

    

    <div class="row">
        <div class="col-md-12">
            <div class="card">

                <!--数据列表顶部-->
                <div class="card-header">
                    <div>
                        
                        <button class="btn btn-danger btn-sm AjaxButton" data-toggle="tooltip" title="删除选中数据" data-confirm-title="删除确认" data-confirm-content="您确定要删除选中的数据吗？" data-id="checked" data-url="{:url('del')}">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                        <button class="btn btn-success btn-sm AjaxButton" data-toggle="tooltip" title="启用选中数据" data-confirm-title="启用确认" data-confirm-content="您确定要启用选中的数据吗？" data-id="checked" data-url="{:url('enable')}">
                            <i class="far fa-circle"></i> 启用
                        </button>

                        <button class="btn btn-warning btn-sm AjaxButton" data-toggle="tooltip" title="禁用选中数据" data-confirm-title="禁用确认" data-confirm-content="您确定要禁用选中的数据吗？" data-id="checked" data-url="{:url('disable')}">
                            <i class="fas fa-ban"></i> 禁用
                        </button>

                        <button class="btn btn-default btn-sm ReloadButton" data-toggle="tooltip" title="刷新列表数据">
                            <i class="fas fa-redo"></i> 刷新
                        </button>
                    </div>
                </div>

                <div class="card-body table-responsive p-0" >
                    <table class="table table-hover table-bordered dataTable text-nowrap">
                        <thead>
                        <tr>
                            <th>
                                <input id="dataCheckAll" type="checkbox" onclick="checkAll(this)" class="checkbox" placeholder="全选/取消">
                            </th>
                            <th>ID</th>
                            <th>用户</th>
                            <th>ll Eleven 音频ID</th>
                            <th>音频名称</th>
                            <th>音频描述</th>
                            <th>预览MP3</th>
                            <th>是否启用</th>
                            <th>样本参数</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach name='data' id='item' key='data_key'}
                        <tr>
                            <td>
                                <input type="checkbox" onclick="checkThis(this)" name="dataCheckbox" data-id="{$item.id}" class="checkbox dataListCheck" value="{$item.id}" placeholder="选择/取消">
                            </td>
                            <td>{$item.id}</td>
                            <td>{$item.user.username|default='公共资源'}</td>
                            <td>{$item.voice_id}</td>
                            <td>{$item.name}</td>
                            <td>
                                {if $item.description}
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-info" data-content="{$item.description}">
                                    <i class="fas fa-eye"></i>
                                    查看
                                </button>
                                {/if}
                            </td>
                            <td>
                                {if $item.preview_url}
                                <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-info" data-voice_url="{$item.preview_url}">
                                    <i class="fas fa-headphones"></i>
                                    试听
                                </button>
                                {/if}
                            </td>
                            <td>
                                {if $item.samples != "null" && $item.samples != "[]"}
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-info" data-content="{$item.samples}">
                                    <i class="fas fa-eye"></i>
                                    查看
                                </button>
                                {/if}
                            </td>
                            <td>{$item.status_text}</td>
                            <td>{$item.create_time}</td>

                            <td class="td-do">
                                <a href="{:url('edit',['id'=>$item.id])}"
                                   class="btn btn-primary btn-xs" title="修改" data-toggle="tooltip">
                                    <i class="fas fa-pen"></i>
                                    
                                </a>
                                <button class="btn btn-danger btn-xs AjaxButton" data-toggle="tooltip" title="删除"  data-id="{$item.id}" data-confirm-title="删除确认" data-confirm-content='您确定要删除ID为 <span class="text-red">{$item.id}</span> 的数据吗' data-url="{:url('del')}">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                                {if $item.status==1}
                                    <button class="btn btn-warning btn-xs AjaxButton" data-toggle="tooltip" title="禁用"  data-id="{$item.id}" data-confirm-title="禁用确认" data-confirm-content='您确定要禁用ID为 <span class="text-red">{$item.id}</span> 的数据吗' data-url="{:url('disable')}">
                                        <i class="fas fa-ban"></i>

                                    </button>
                                {else/}
                                    <button class="btn btn-success btn-xs AjaxButton" data-toggle="tooltip" title="启用"  data-id="{$item.id}" data-confirm-title="启用确认" data-confirm-content='您确定要启用ID为 <span class="text-red">{$item.id}</span> 的数据吗' data-url="{:url('enable')}">
                                        <i class="far fa-circle"></i>

                                    </button>
                                {/if}

                            </td>
                        </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>

                <!-- 数据列表底部 -->
                <div class="card-footer">
                    {$page|raw}
                    {include file='public/change_page' /}
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-info">
        <div class="modal-dialog">
            <div class="modal-content bg-info">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="mode-body-p">

                    </p>
                </div>
            </div>

        </div>
    </div>
</section>

<script>
    $(document).on("click",'button[data-toggle="modal"]',function () {
        let voice_url = $(this).data('voice_url');
        console.info(voice_url)
        if (voice_url){
            $("#mode-body-p").html('<audio controls>\n' +
                '  <source src="'+voice_url+'" type="audio/mpeg">\n' +
                '  您的浏览器不支持该音频格式。\n' +
                '</audio>')
        }else{
            let content = $(this).data('content');
            $("#mode-body-p").text(typeof(content) == 'object' ? JSON.stringify(content, null, '\t') : content)
        }
    })
</script>
{/block}
